<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<title>收货地址</title>
<link href="/res/css/respective/safecenter/back-safe.css" rel="stylesheet">
<style>
span.blue{
	color: rgb(0, 177, 219);
}
.tanbox .btn .confirmButton{
	background-color: #00b1db;
	border:1px solid #00b1db;
	color:white;
}
.tanbox .btn .confirmButton:hover{
	border-color: #00ceff;
}
.tanbox .btn .cancleButton:hover{
	border-color: #00ceff;
} 
</style>
</head>
[#assign menucode="shippingAddress"/]
<body>
	<div class="warp">
   [#include "/front/common/front_headAzt.html"]
         <div class="backcontent">
     [#include "/front/common/front_leftAzt.html"]
            <div class="back-main">
            	<div class="inner back-safe">
                	 <div class="title">收货地址</div>
                     <div class="deliveryAddress">
                     	 <div class="d1"><a href="javascript:void(0);" class="addAdrs" onclick="showAddress()">新增收货地址</a> 您已创建<span>[#if address??]${address?size}[#assign addressize=address?size][/#if]</span>个收货地址，最多可创建<span>10</span>个</div>
                         <ul>
                         [#if address?? && address?size>0]
                         [#list address as address]
                           <li>
                            	<div class="name">${address.name!}[#if address.setdefault==1]<span style="margin-left: 8px;">默认地址</span>[/#if]</div>
                                <p><label>地址：</label>${address.provinceName!} ${address.cityName!} ${address.areaName!} ${address.addr!}</p>
                                <p><label>手机：</label>[#if address.tel??][#if address.tel?length gt 3]${(address.tel!)?substring(0,3)}****${(address.tel!)?substring(7)}[#else]${address.tel!}[/#if][/#if]</p>
                                <p><label>电话：</label>${address.phone!}</p>
                                <span class="act">[#if address.setdefault==1]<a style="color:#999;text-decoration:none"  href="javascript:void(0)">默认地址</a>[#else]<a href="javascript:void(0);" onclick="setDefaultAddress(${address.id!});">设为默认</a>[/#if]<a href="javascript:void(0);" onclick="showAddress('${address.id!}')">修改</a> <a href="javascript:void(0);" onclick="showRemoveAddressWin('${address.id!}');">删除</a></span>
                            </li>
                         [/#list]
                         [/#if]
                         </ul>
                     </div>
                </div>
            </div>
         </div>
         
 		<!-- 底部菜单-->
		[#include "/front/common/front_footerAzt.html"]
    </div>

	<div class="tanbox tanEditAddress" id="addressWin" style="display:none;"></div>



    <!-- 提醒 -->
    <div class="tanbox tanTip" style="display:none" id="tanTip">
    <div class="tanbg"></div>
    <div class="box">
        <span class="closed"></span>
        <div class="cont">
            <div class="des">
                <h4>提醒</h4>
                <p>最多创建<span class="blue">10</span>个收货地址，您已创建<span class="blue">10</span>个，请删除后再添加！</p>
            </div>
            <div class="btn"><a href="javascript:void(0);" onclick="javascript:$(this).parents('.tanbox').hide();">知道了</a></div>
        </div>
    </div>
 </div>
 
 <!--确认删除 -->
<div class="tanbox tanConfirm" style="display: none" id="removeAddressWin">
    <input type="hidden" name="addressId">
    <div class="tanbg"></div>
    <div class="box">
        <span class="closed"></span>
        <div class="cont">
            <p>您确定要删除该收货地址吗？</p>
            <div class="btn">
                <a class="confirmButton" href="javascript:void(0)" onclick="removeAddress()">确定</a>
                <a class="cancleButton" href="javascript:void(0)" onclick="javascript:$(this).parents('#removeAddressWin').hide();">取消</a>
            </div>
        </div>
    </div>
</div>
 
 <script type="text/html" id="addressTemplate">
    <div class="tanbg"></div>
    <div class="box">
        <div class="title"><span class="closed"></span>[:=this.title||'':]收货地址</div>
        <form id="addressForm" data-validator-option="{theme:'yellow_right', timely:3}">
            <input type="hidden" name="id" value="[:=this.id||'':]">
            <div class="cont">
                <ul>
                    <li>
                        <label>收货人：</label>
                        <div class="inputfile">
                            <input type="text" value="[:=this.name||'':]" placeholder="收货人" class="input" name="name" data-display="收货人" data-rule="required"/>
                        </div>
                    </li>
                    <li>
                        <label>所在地区：</label>
                        <div class="inputfile">
                            <div class="d1">
                                <select id="order_province" name="province" data-val="[:=this.province||'':]" data-display="所在地区" data-rule="required" data-target="#order_district">
                                    <option value="">请选择</option>
                                </select>
                                <select id="order_city" name="city" data-val="[:=this.city||'':]" data-display="所在地区" data-rule="required" data-target="#order_district">
                                    <option value="">请选择</option>
                                </select>
                                <select class="last" id="order_district" name="area" data-val="[:=this.area||'':]" data-display="所在地区" data-rule="required">
                                    <option value="">请选择</option>
                                </select>
                                <div class="d2">
                                    <input type="text" class="input" placeholder="详细地址" name="addr" value="[:=this.addr||'':]" data-display="详细地址" data-rule="required"/>
                                </div>
                            </div>
                        </div>
                    </li>
                    <li>
                        <label>手机号码：</label>
                        <div class="inputfile">
                            <input type="text" class="input telPhone" placeholder="请填写常用手机号码" name="tel" value="[:=this.tel||'':]"
                                   data-display="手机号码" data-rule="required(from, .telPhone);mobile" data-msg-required="请至少填写一种联系方式"/>
                        </div>
                    </li>
                    <li>
                        <label>固定电话：</label>
                        <div class="inputfile">
                            <input type="text" class="input telPhone" placeholder="固定电话" name="phone" value="[:=this.phone||'':]"
                                   data-display="固定电话" data-rule="required(from, .telPhone)"/>
                            <div class="ck">
                                <input id="setDefaultCheck" type="checkbox" name="setdefault" value="1" [:if(this.setdefault||0 == 1) {:]checked[:}:]/>
                                <label for="setDefaultCheck" style="float: none;">设为默认地址</label>
                            </div>
                        </div>
                    </li>
                    <li>
                        <label>&nbsp;</label>
                        <div class="inputfile btn btn-left">
                            <a href="javascript:void(0)" onclick="saveAddress()" style="background-color: #00b1db; color: #ffffff;">保存收货地址</a>
                            <a href="javascript:void(0)" onclick="$('#addressWin').hide()">取消</a>
                        </div>
                    </li>
                </ul>
            </div>
        </form>
    </div>
</script>
<script type="text/javascript" src="/res/js/common/tppl.js"></script>
<script src="/res/js/common/common.js" type="text/javascript"></script>
<script src="/res/third/layer/layer.js" type="text/javascript"></script>
<script type="text/javascript" src="/res/js/common/jquery.address.js"></script>
<script src="/res/third/nice-validator/jquery.validator.js?local=zh-CN" type="text/javascript"></script>
<script type="text/javascript">
	$(function(){
		//弹窗关闭
		
		$('.tanbox').on('click', '.closed', function () {
	        $(this).parents('.tanbox').hide();
	    });
	});
	
    //弹出收货地址框
    function showAddress(addressId) {
        if(addressId) {
            $.ajax({
                url : '/address/' + addressId,
                type : 'post',
                dataType : 'json',
                beforeSend : function() {
                    layer.load();
                },
                success : function(data) {
                    if(data.success) {
                        data.obj.title = '编辑';
                        $('#addressWin').html(tppl($('#addressTemplate').html(), data.obj));
                        $.address({
                            province : 'order_province',
                            city : 'order_city',
                            district : 'order_district'
                        });
                        $('#addressWin').show();
                    } else {
                        layer.alert("获取收货地址异常");
                    }
                },
                complete : function() {
                    layer.closeAll('loading');
                }
            })
        } else {
        	//判断是否超过10个
        	var addressize='${addressize!}'
        	if(addressize>=10){
        		$("#tanTip").show();
        		return false;
        	}
            $('#addressWin').html(tppl($('#addressTemplate').html(), {title : '新增'}));
            $.address({
                province : 'order_province',
                city : 'order_city',
                district : 'order_district'
            });
            $('#addressWin').show();
        }
    }

    //新增、编辑收货地址
    function saveAddress() {
        if($('#addressForm').isValid()) {
            $.ajax({
                url : '/address/save',
                type : 'post',
                dataType : 'json',
                data : $('#addressForm').serialize(),
                beforeSend : function() {
                    layer.load();
                },
                success : function(data) {
                    if(data.success) {
                    	layer.msg("操作成功", {time:2000});
                        location.reload();
                    }
                },
                complete : function() {
                    layer.closeAll('loading');
                }
            });
        }
    }

  //设置默认收货地址
    function setDefaultAddress(addressId) {
        $.ajax({
            url : '/address/setDeafault',
            type : 'post',
            dataType : 'json',
            data : {addressId : addressId},
            beforeSend : function() {
                layer.load();
            },
            success : function(data) {
                if(data.success) {
                	layer.msg("操作成功", {time:2000});
                    location.reload();
                } else {
                    layer.alert("操作失败");
                }
            },
            complete : function() {
                layer.closeAll('loading');
            }
        });
    }

    //删除收货地址
    function removeAddress() {
        var addressId = $('#removeAddressWin input[name=addressId]').val();
        $.ajax({
            url : '/address/remove',
            type : 'post',
            dataType : 'json',
            data : {addressId : addressId},
            beforeSend : function() {
                layer.load();
            },
            success : function(data) {
                if(data.success) {
                	layer.msg("操作成功", {time:2000});
                    location.reload();
                } else {
                    layer.alert("操作失败");
                }
            },
            complete : function() {
                layer.closeAll('loading');
            }
        });
    }
    
    function showRemoveAddressWin(addressId) {
        $('#removeAddressWin input[name=addressId]').val(addressId);
        $('#removeAddressWin').show();
    }
	
</script>
</body>
</html>
